From 09fa200abe52fc60f1b01f9d2cc4dd7ef2e8f483 Mon Sep 17 00:00:00 2001 From: Alex Crichton Date: Thu, 23 Oct 2014 17:26:41 -0700 Subject: [PATCH] Tweak doc style to match crates.io --- Makefile.in | 3 +- src/doc/footer.html | 14 +-- src/doc/guide.md | 4 +- src/doc/header.html | 40 +++++++- src/doc/images/circle-with-i.png | Bin 0 -> 1484 bytes src/doc/images/search.png | Bin 0 -> 411 bytes src/doc/index.md | 2 +- src/doc/javascripts/all.js | 54 +++++----- src/doc/manifest.md | 2 +- src/doc/stylesheets/all.css | 169 ++++++++++++++++++++++++++---- src/doc/stylesheets/prism.css | 170 +++++++++++++++++++++---------- 11 files changed, 345 insertions(+), 113 deletions(-) create mode 100644 src/doc/images/circle-with-i.png create mode 100644 src/doc/images/search.png diff --git a/Makefile.in b/Makefile.in index 3f685a256..91704cebc 100644 --- a/Makefile.in +++ b/Makefile.in @@ -112,7 +112,8 @@ DOC_OPTS := --markdown-no-toc \ --html-after-content src/doc/footer.html ASSETS := CNAME images/noise.png images/forkme.png images/Cargo-Logo-Small.png \ stylesheets/all.css stylesheets/normalize.css javascripts/prism.js \ - javascripts/all.js stylesheets/prism.css + javascripts/all.js stylesheets/prism.css images/circle-with-i.png \ + images/search.png doc: $(foreach doc,$(DOCS),target/doc/$(doc).html) \ $(foreach asset,$(ASSETS),target/doc/$(asset)) diff --git a/src/doc/footer.html b/src/doc/footer.html index 0d648dc81..c2eff8f40 100644 --- a/src/doc/footer.html +++ b/src/doc/footer.html @@ -1,11 +1,11 @@ - + diff --git a/src/doc/guide.md b/src/doc/guide.md index 327820aaf..f6c5a31b3 100644 --- a/src/doc/guide.md +++ b/src/doc/guide.md @@ -20,7 +20,7 @@ To accomplish this goal, Cargo does four things: You can convert an existing Rust project to use Cargo. You'll have to create a `Cargo.toml` file with all of your dependencies, and move your source files and test files into the places where Cargo expects them to be. See the [manifest -description](/manifest.html) and the "Cargo Conventions" section below for more +description](manifest.html) and the "Cargo Conventions" section below for more details. # Creating A New Project @@ -353,7 +353,7 @@ your code directory or in your home directory). Inside that file, put this: -``` +```toml paths = ["/path/to/project/conduit"] ``` diff --git a/src/doc/header.html b/src/doc/header.html index de0b5d270..8488444c5 100644 --- a/src/doc/header.html +++ b/src/doc/header.html @@ -1,11 +1,41 @@ + - + +
-

- Cargo downloads your Rust - project's dependencies and builds your project -

diff --git a/src/doc/images/circle-with-i.png b/src/doc/images/circle-with-i.png new file mode 100644 index 0000000000000000000000000000000000000000..f9feda4bcbfe7c33599c511abcaaafa4bde77c5e GIT binary patch literal 1484 zcmaJ>eM}Q~7`{?U<i-nF!&ccZkWAEUZbhK+V{#9iAfT=073dO%@{ zEdtg!BaS&SSrna%!#H&tI2KsM(M6Xrh!Ya$vW=lxHsjW?OoI;St|+)aaF^WuKJq@# z`@HY_avJ04kX(&xI)Dpa7N0RjPsl#d@GXd8s-X)3s_68pTmlJ-vmT_@|^W?@;`7i@R;4ID9X?puY7t5+>miAZCK437+cMV9b zxQq10FQ1!7S*@7G>t}JVi?A3q5{^ekl5R|;M$IY%qE^a{#d5hxS!^<+dUJungc?ms zxn8+|HPWtHitw@vSodQr`b2Ep5R{M0Y$O=6j&Pe9nga8MW8@NAj7qaH-()s(eEOxe zJjA+}&@zuTBghl6Fee6%kM}?0Ubx~s6yGkImpd%lpYU>?XE<{gwMCCZPy%K#>g|CW z&Y4(D%Riz^2n&LpIbkhtY7>|lgmJzz?lzzHFU&MBcBDQA<;Sh5{^9>{QXTFhaJ72h$^m=dNYU@SNLrWH_de-J9TxUU2$@|Ll4YqL4SUjtf@ginb*> zE1apVyDr8Qg+Db3hCNQ)(|-56HN9yJZ}N-t%~v{Besk%Akx^}0W`AAt_h$<4+){U~ zyalb3K6^AY2iZ?-*j*gV3TsNnza1X=vg;7Jd~d>L4Q-nYfla;Znto}DqlM<)t~217O=91!b-14-ya5{gAX!gfpFX___t(gB^#*YBGc zJ$ZWojY>~A=I#nxZ3*g>jr@MgNb-PK+S&Ry1KE@RXc=#5iv7O)-tIeX<44dzblyBqx@u`^LkTg z{h_UwwITJ9v7;+8MYd<&-`JLMmiKWoT9Lo{#nuZ>i@+A_gKm5^L>A>H|LCu+ieAqN z@2|1nJkZ{F`G;^fX{muWbck+LWH#4LUF1y}epB--5Ez7d(uQAu5KUy`|5uBt)Ofb| Hjply=tdkYn literal 0 HcmV?d00001 diff --git a/src/doc/images/search.png b/src/doc/images/search.png new file mode 100644 index 0000000000000000000000000000000000000000..a4814a5b09bd050a9f104f8255b55512b01d0214 GIT binary patch literal 411 zcmV;M0c8G(P)cpznsNmZQW%S1Ct?#NT5Dkwi9&4hRqXr#f?#hih#-*^ zA*iWbOcOz45sQ_G?uL!mW{Tmu*Wd&5!a2|XFlT18@2&=0x4#GT{HB)YdC%&{?G=$Ii`T(vdScL*0DzN|n002ovPDHLk FV1g2SttJ2f literal 0 HcmV?d00001 diff --git a/src/doc/index.md b/src/doc/index.md index e6c7b4b7b..90ac53ece 100644 --- a/src/doc/index.md +++ b/src/doc/index.md @@ -86,4 +86,4 @@ Hello, world! # Going Further -For more details on using Cargo, check out the [Cargo Guide](/guide.html) +For more details on using Cargo, check out the [Cargo Guide](guide.html) diff --git a/src/doc/javascripts/all.js b/src/doc/javascripts/all.js index 7951c140d..2694e8fc6 100644 --- a/src/doc/javascripts/all.js +++ b/src/doc/javascripts/all.js @@ -1,28 +1,36 @@ //= require_tree . Prism.languages.toml = { - 'string': /("|')(\\?.)*?\1/g, - 'comment': /#.*/, - // 'atrule': { - // pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi, - // inside: { - // 'punctuation': /[;:]/g - // } - // }, - // 'url': /url\((["']?).*?\1\)/gi, - // 'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g, - // 'property': /(\b|\B)[\w-]+(?=\s*:)/ig, - // 'punctuation': /[\{\};:]/g, - // 'function': /[-a-z0-9]+(?=\()/ig - 'number': /\d+/, - 'boolean': /true|false/, - 'toml-section': /\[.*\]/, - 'toml-key': /[\w-]+/ + // https://github.com/LeaVerou/prism/issues/307 + 'comment': [{ + pattern: /(^[^"]*?("[^"]*?"[^"]*?)*?[^"\\]*?)(\/\*[\w\W]*?\*\/|(^|[^:])#.*?(\r?\n|$))/g, + lookbehind: true + }], + 'string': /("|')(\\?.)*?\1/g, + 'number': /\d+/, + 'boolean': /true|false/, + 'toml-section': /\[.*\]/, + 'toml-key': /[\w-]+/ }; -(function() { - var pres = document.querySelectorAll('pre.rust'); - for (var i = 0; i < pres.length; i++) { - pres[i].className += ' language-rust'; - } -})(); +$(function() { + var pres = document.querySelectorAll('pre.rust'); + for (var i = 0; i < pres.length; i++) { + pres[i].className += ' language-rust'; + } + + $('button.dropdown, a.dropdown').click(function(el, e) { + $(this).toggleClass('active'); + $(this).siblings('ul').toggleClass('open'); + + if ($(this).hasClass('active')) { + $(document).on('mousedown.useroptions', function() { + setTimeout(function() { + $('button.dropdown, a.dropdown').removeClass('active'); + $('button.dropdown + ul').removeClass('open'); + }, 150); + $(document).off('mousedown.useroptions'); + }); + } + }); +}); diff --git a/src/doc/manifest.md b/src/doc/manifest.md index 0acfa476a..c49521e0e 100644 --- a/src/doc/manifest.md +++ b/src/doc/manifest.md @@ -31,7 +31,7 @@ You can specify a script that Cargo should execute before invoking your Rust code, for example. More information can be found in the building non-rust code [guide][2] -[1]: http://doc.rust-lang.org/rust.html#external-blocks +[1]: http://doc.rust-lang.org/reference.html#external-blocks [2]: build-script.html ```toml diff --git a/src/doc/stylesheets/all.css b/src/doc/stylesheets/all.css index 2520c6b0f..bbb3f666c 100644 --- a/src/doc/stylesheets/all.css +++ b/src/doc/stylesheets/all.css @@ -3,6 +3,8 @@ html { background-color: #3b6837; } +main, #header { width: 900px; } + body { font-family: sans-serif; } @@ -20,8 +22,8 @@ body { align-items: center; } -a { color: #f3bb00; } -a:hover { color: #b64790; } +a { color: #00ac5b; text-decoration: none; } +a:hover { color: #00793f; } h1 { font-size: 24px; @@ -35,11 +37,28 @@ h1 code:not(.highlight) { vertical-align: bottom; } h1 a, h2 a { color: #b64790; text-decoration: none; } +h1:hover a, h2:hover a { color: #A03D7E; } h1:hover a:after, -h2:hover a:after{ content: '\2002\00a7\2002'; } -h1.title { display: none; } /* hide rustdoc-generated title */ +h2:hover a:after { content: '\2002\00a7\2002'; } :target { background: rgba(239, 242, 178, 1); padding: 5px; } +h1.title { /* style rustdoc-generated title */ + width: 100%; + padding: 40px 20px 40px 60px; + background-color: #edebdd; + margin-bottom: 20px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + border-radius: 5px; + margin: 0; + color: #383838; + font-size: 2em; + background-image: url(../images/circle-with-i.png); + background-repeat: no-repeat; + background-position: 20px center; +} + h2 { font-size: 18px; margin: 15px 0 5px 0; @@ -66,12 +85,17 @@ main { background-color: #f9f7ec; padding: 15px; - border-radius: 5px; + + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + border-radius: 10px; box-shadow: 0px 0px 5px 2px #3b6837; + border: 5px solid #62865f; + color: #383838; } main > p:first-child { - color: #199b5c; font-weight: 500; margin-top: 3px; padding-bottom: 15px; @@ -83,7 +107,7 @@ main p:first-child a { color: #3b6837; } main p:first-child a:hover { color: #62865f; } main p, main ul { - color: #3b6837; + /* color: #3b6837; */ margin: 10px 0; line-height: 150%; } @@ -100,37 +124,46 @@ img.logo { pre { padding: 10px; margin: 10px 0; - border: 1px solid #cad0d0; + /* border: 1px solid #cad0d0; */ border-radius: 4px; max-width: calc(100vw - 45px); overflow-x: auto; - /* override prism.js styles for fonts */ + background: #383838 !important; + color: white; + padding: 20px; + + /* override prism.js styles */ font-size: 1em !important; - background: #eeecdd !important; + border: none !important; + box-shadow: none !important; + text-shadow: none !important; } -footer { - margin-top: 10px; - border-top: 1px solid #b64790; - padding-top: 10px; - width: 100%; - text-align: center; +pre code { + text-shadow: none !important; +} +footer { + padding: 40px; + width: 900px; } footer a { - color: #b64790; - text-decoration: none; + color: white; } footer a:hover { - text-decoration: underline; + color: #e6e6e6; +} +footer .sep, #header .sep { + margin: 0 10px; + color: #284725; } + .headerlink { display: none; text-decoration: none; } - .fork-me { position:absolute; top:0; @@ -154,3 +187,99 @@ code span.s1 { color: #2AA198; } table th { border-bottom: 1px solid black; } table td, table th { padding: 5px 10px; } + +#header { + color: white; + position: relative; + height: 100px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; +} +#header h1 { font-size: 2em; } +#header a, #header h1 { color: white; text-decoration: none; } +#header a:hover { color: #d9d9d9; } + +#header input.search { + border: none; + color: black; + outline: 0; + margin-left: 30px; + padding: 5px 5px 5px 25px; + background-image: url(../images/search.png); + background-repeat: no-repeat; + background-position: 6px 6px; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + -ms-border-radius: 15px; + border-radius: 15px; +} + +#header .nav { + -webkit-flex-grow: 2; + flex-grow: 2; + text-align: right; +} + +button.dropdown, a.dropdown { cursor: pointer; } +button.dropdown .arrow, a.dropdown .arrow { + font-size: 50%; display: inline-block; vertical-align: middle; +} +button.dropdown .arrow::after, a.dropdown .arrow::after { content: "▼"; } +button.active.dropdown .arrow::after, a.active.dropdown .arrow::after { + content: "▲"; +} + +button { + background: none; + outline: 0; + border: 0; + padding: 10px; + color: white; +} + +ul.dropdown { + display: none; + visibility: none; + position: absolute; + top: 100%; + left: 0; + width: 100%; + opacity: 0; + margin: 0; + text-align: left; + padding: 0; + background: white; + border: 1px solid #d5d3cb; + list-style: none; + z-index: 10; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + border-radius: 5px; +} + +ul.dropdown li a { + font-size: 90%; + width: 100%; + display: inline-block; + padding: 8px 10px; + text-decoration: none; + color: #383838 !important; +} + +ul.dropdown li a:hover { + background: #5e5e5e; + color: white !important; +} +ul.dropdown li.last { border-top: 1px solid #d5d3cb; } +ul.dropdown.open { + display: block; + visibility: visible; + opacity: 1; +} +.dropdown-container { + display: inline-block; + position: relative; +} diff --git a/src/doc/stylesheets/prism.css b/src/doc/stylesheets/prism.css index 6cc4523c5..d80a94102 100644 --- a/src/doc/stylesheets/prism.css +++ b/src/doc/stylesheets/prism.css @@ -1,17 +1,16 @@ -/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */ +/* http://prismjs.com/download.html?themes=prism-twilight&languages=markup+css+clike+javascript */ /** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou + * prism.js Twilight theme + * Based (more or less) on the Twilight theme originally of Textmate fame. + * @author Remy Bach */ - code[class*="language-"], pre[class*="language-"] { - color: black; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', monospace; + color: white; direction: ltr; + font-family: Consolas, Monaco, 'Andale Mono', monospace; text-align: left; + text-shadow: 0 -.1em .2em black; white-space: pre; word-spacing: normal; word-break: normal; @@ -27,100 +26,104 @@ pre[class*="language-"] { hyphens: none; } -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; -} - -pre[class*="language-"]::selection, pre[class*="language-"] ::selection, -code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; -} - -@media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } +pre[class*="language-"], +:not(pre) > code[class*="language-"] { + background: hsl(0, 0%, 8%); /* #141414 */ } /* Code blocks */ pre[class*="language-"] { - padding: 1em; + border-radius: .5em; + border: .3em solid hsl(0, 0%, 33%); /* #282A2B */ + box-shadow: 1px 1px .5em black inset; margin: .5em 0; overflow: auto; + padding: 1em; } -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #f5f2f0; +pre[class*="language-"]::selection { + /* Safari */ + background: hsl(200, 4%, 16%); /* #282A2B */ +} + +pre[class*="language-"]::selection { + /* Firefox */ + background: hsl(200, 4%, 16%); /* #282A2B */ +} + +/* Text Selection colour */ +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */ +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */ } /* Inline code */ :not(pre) > code[class*="language-"] { - padding: .1em; border-radius: .3em; + border: .13em solid hsl(0, 0%, 33%); /* #545454 */ + box-shadow: 1px 1px .3em -.1em black inset; + padding: .15em .2em .05em; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: slategray; + color: hsl(0, 0%, 47%); /* #777777 */ } .token.punctuation { - color: #999; + opacity: .7; } .namespace { opacity: .7; } -.token.property, .token.tag, .token.boolean, .token.number, -.token.constant, -.token.symbol, .token.deleted { - color: #905; + color: hsl(14, 58%, 55%); /* #CF6A4C */ } +.token.keyword, +.token.property, .token.selector, +.token.constant, +.token.symbol, +.token.builtin { + color: hsl(53, 89%, 79%); /* #F9EE98 */ +} + .token.attr-name, +.token.attr-value, .token.string, .token.char, -.token.builtin, -.token.inserted { - color: #690; -} - .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, -.token.variable { - color: #a67f59; - background: hsla(0, 0%, 100%, .5); -} - -.token.atrule, -.token.attr-value, -.token.keyword { - color: #07a; +.token.variable, +.token.inserted { + color: hsl(76, 21%, 52%); /* #8F9D6A */ } -.token.function { - color: #DD4A68; +.token.atrule { + color: hsl(218, 22%, 55%); /* #7587A6 */ } .token.regex, .token.important { - color: #e90; + color: hsl(42, 75%, 65%); /* #E9C062 */ } .token.important { @@ -131,3 +134,64 @@ pre[class*="language-"] { cursor: help; } +pre[data-line] { + padding: 1em 0 1em 3em; + position: relative; +} + +/* Markup */ +.language-markup .token.tag, +.language-markup .token.attr-name, +.language-markup .token.punctuation { + color: hsl(33, 33%, 52%); /* #AC885B */ +} + +/* Make the tokens sit above the line highlight so the colours don't look faded. */ +.token { + position: relative; + z-index: 1; +} + +.line-highlight { + background: -moz-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */ + background: -o-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */ + background: -webkit-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */ + background: hsla(0, 0%, 33%, 0.25); /* #545454 */ + background: linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */ + border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */ + border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */ + left: 0; + line-height: inherit; + margin-top: 0.75em; /* Same as .prism’s padding-top */ + padding: inherit 0; + pointer-events: none; + position: absolute; + right: 0; + white-space: pre; + z-index: 0; +} + +.line-highlight:before, +.line-highlight[data-end]:after { + background-color: hsl(215, 15%, 59%); /* #8794A6 */ + border-radius: 999px; + box-shadow: 0 1px white; + color: hsl(24, 20%, 95%); /* #F5F2F0 */ + content: attr(data-start); + font: bold 65%/1.5 sans-serif; + left: .6em; + min-width: 1em; + padding: 0 .5em; + position: absolute; + text-align: center; + text-shadow: none; + top: .4em; + vertical-align: .3em; +} + +.line-highlight[data-end]:after { + bottom: .4em; + content: attr(data-end); + top: auto; +} + -- 2.30.2